<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    <h1 style="color: red">{{num}}</h1>
    <!-- 这里的 v-model 相当于给子组件传了两个东西，一个 modelValue 一个是事件 update:modelValue -->
    <cell v-model="num"></cell>
  </div>
</body>

<script>
  const app = Vue.createApp({
    data () {
      return {
        num: 100
      }
    },
  })

  // 子组件
  app.component('cell', {
    template: `<div>
        <input :value='modelValue' @input='inputChange' />
        <span>{{modelValue}}</span>
      </div>`,
    // 通过 v-model 添加的值，可以通过 modelValue 进行获取，该写法是固定写法
    props: ['modelValue'],
    // 通过 v-model 添加的自定义事件，该事件的名字也是固定写法
    emits: ['update:modelValue'],
    methods: {
      inputChange () {
        // console.log(event.target.value);
        // 这里是用来触发父组件定义数据值的改变方法
        this.$emit('update:modelValue', event.target.value)
      }
    },
  })

  app.mount('#app')
</script>

</html>
